<template>
  <view class="content">
    <view class="view-logo">
      <image class="logo" src="/static/ywz_logo.png"/>
      <text class="text-logo"> {{ title }}</text>
    </view>
    <view class="view-content">
      <view v-for="item in viewList" class="view-list"  @click="toDetail">
        <image class="view-list-img" :src="item.logoUrl"/>
        <text class="view-list-text">{{ item.title }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {ref} from 'vue'

const title = ref('游王子og 技术分享平台')

const viewList = ref([
  {
    title: 'AI 知识库',
    logoUrl: '/static/knowledgeLogo/AI.jpg'
  },
  {
    title: 'H5 知识库',
    logoUrl: '/static/knowledgeLogo/H5.jpg'
  },
  {
    title: 'java 语言',
    logoUrl: '/static/knowledgeLogo/java.jpg'
  },
  {
    title: 'Linux 服务器系统',
    logoUrl: '/static/knowledgeLogo/linux.png'
  },
  {
    title: 'milvus 向量库',
    logoUrl: '/static/knowledgeLogo/milvus-logo.png'
  },
  {
    title: 'Python 语言',
    logoUrl: '/static/knowledgeLogo/Python.png'
  },
  {
    title: 'springboot 框架',
    logoUrl: '/static/knowledgeLogo/springboot.jpeg'
  },
  {
    title: 'vue 框架',
    logoUrl: '/static/knowledgeLogo/vue.png'
  },
])

const toDetail = () => {
  uni.navigateTo({
    url: '/pages/componentOverview/ComponentProp'
  })
}


</script>

<style>
page {
  height: 100%
}

.content {
  width: 100vw;
  height: 100%;
  background-image: url('../../static/app-bg.jpg');
  background-size: cover;
}

.logo {
  height: 50rpx;
  width: 180rpx;
}

.view-logo {
  box-sizing: border-box;
  padding: 0.5rem;
  height: 8%;
}

.text-logo {
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

.view-content {
  width: 100%;
  height: 92%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.75);
}

.view-list {
  display: flex;
  align-items: center;
  width: 90%;
  height: 10%;
  box-sizing: border-box;
  margin-top: 5px;
}

.view-list-img {
  width: 20%;
  height: 100%;
}

.view-list-text {
  box-sizing: border-box;
  margin-left: 20px;
  font-size: 16px;
  color: #333;
}
</style>
